import { memo } from "react";

export default memo(function Demo8({handle})
{
    /* 
        如果子组件只使用 React.memo ，传递的有props及回调函数，组件内对传递过来的props是可以进行浅比较，如果props一致的话，被React.memo包装的组件就不会渲染，如果不一致，就会渲染。
        但是当父组件传递的props是回调函数，父组件每次渲染时给子组件传递的函数都是一个新的函数引用 React.memo 就认为props 发生变化并重新渲染, 起不到优化的作用

        useCallback 就是为了解决这个 React.memo 优化失效的问题
    */
    console.log('Child Render');
    return <div onClick={() => handle('123')}>
        我是子组件
    </div>;
})